<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Adminox - Responsive Web App Kit</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description">
	<meta content="Coderthemes" name="author">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!-- App favicon -->
	<link rel="shortcut icon" href="${ctx}/admin/images/favicon.ico">
	<!-- App css -->
	<link href="${ctx}/admin/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="${ctx}/admin/plugins/bootstrap-editable/bootstrap-editable.css" rel="stylesheet" type="text/css">
	<link href="${ctx}/admin/plugins/cropper/main.css" rel="stylesheet" type="text/css">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.4.1/cropper.css" rel="stylesheet" type="text/css">
	<link href="${ctx}/admin/css/icons.css" rel="stylesheet" type="text/css">
	<link href="${ctx}/admin/css/metismenu.min.css" rel="stylesheet" type="text/css">
	<link href="${ctx}/admin/css/style.css" rel="stylesheet" type="text/css">
	<script src="${ctx}/admin/js/modernizr.min.js"></script>
</head>
<body>
<!-- Begin page -->
<div id="wrapper">
	<!-- Top Bar Start -->
   <#include "common/header.ftl">
	<!-- Top Bar End -->
	<!-- ========== Left Sidebar Start ========== -->
   <#include "common/menu.ftl">
	<!-- Left Sidebar End -->
	<!-- ============================================================== -->
	<!-- Start right Content here -->
	<!-- ============================================================== -->
	<div class="content-page">
		<!-- Start content -->
		<div class="content">
			<div class="container-fluid">
				<div class="row">
					<div class="col-12">
						<div class="page-title-box">
							<h4 class="page-title float-left">个人资料</h4>
							<ol class="breadcrumb float-right">
								<li class="breadcrumb-item"><a href="#">Adminox</a></li>
								<li class="breadcrumb-item"><a href="#">Extras</a></li>
								<li class="breadcrumb-item active">Profile</li>
							</ol>
							<div class="clearfix"></div>
						</div>
					</div>
				</div>
				<!-- end row -->
				<div class="row">
					<div class="col-sm-12">
						<div class="profile-bg-picture"
						     style="background-image:url('${ctx}/admin/images/bg-profile.jpg')">
							<span class="picture-bg-overlay"></span>
							<!-- overlay -->
						</div>
						<!-- meta -->
						<div class="profile-user-box">
							<div class="row">
								<div class="col-sm-6">
									<span class="pull-left m-r-15" data-toggle="modal" data-target="#avatar-modal"><img
											src="${ctx}/7b630ff188984c2b968377bbd2597d6c.jpeg" alt=""
											class="thumb-lg rounded-circle"></span>
									<div class="media-body">
										<h4 class="m-t-5 m-b-5 font-18 ellipsis">metamorphosis</h4>
										<p class="font-13"> programer</p>
										<p class="text-muted m-b-0">
											<small>Xi'An Shaanxi</small>
										</p>
									</div>
								</div>
								<div class="col-sm-6">
									<div class="text-right">
										<button type="button" class="btn btn-success waves-effect waves-light">返回我的主页 <i
												class="fa fa-angle-right"></i></button>
									</div>
								</div>
							</div>


						</div>
						<!--/ meta -->
					</div>

				</div>
				<div class="row">
					<div class="col-md-12">
						<!-- Personal-Information -->
						<div class="card-box">
							<table class="table" style="line-height: 45px">
								<tbody>
								<tr>
									<td class="font-15">用户名</td>
									<td>
                                        <input type="text" name="username" class="form-control"/>
                                    </td>
								</tr>
								<tr>
									<td class="font-15">用户昵称</td>
									<td>
										<input type="text" name="nickname" class="form-control"/>
									</td>
								</tr>
								<tr>
									<td class="font-15">一句话介绍</td>
									<td width="65%">
                                        <textarea class="form-control"></textarea>
									</td>
								</tr>
								<tr>
									<td>姓名</td>
									<td>
                                        <input type="text" class="form-control" style="margin: auto 0">
                                    </td>
								</tr>
								<tr>
									<td>Select, local array, custom display</td>
									<td><a href="#" id="inline-sex" data-type="select" data-pk="1" data-value=""
									       data-title="Select sex"></a></td>
								</tr>
								<tr>
									<td>Select, remote array, no buttons</td>
									<td><a href="#" id="inline-group" data-type="select" data-pk="1" data-value="5"
									       data-source="/groups" data-title="Select group">Admin</a></td>
								</tr>
								<tr>
									<td>Select, error while loading</td>
									<td><a href="#" id="inline-status" data-type="select" data-pk="1" data-value="0"
									       data-source="/status" data-title="Select status">Active</a></td>
								</tr>
								<tr>
									<td>Combodate (date)</td>
									<td><a href="#" id="inline-dob" data-type="combodate" data-value="1984-05-15"
									       data-format="YYYY-MM-DD" data-viewformat="DD/MM/YYYY"
									       data-template="D / MMM / YYYY" data-pk="1"
									       data-title="Select Date of birth"></a></td>
								</tr>
								<tr>
									<td>Combodate (datetime)</td>
									<td><a href="#" id="inline-event" data-type="combodate"
									       data-template="D MMM YYYY  HH:mm" data-format="YYYY-MM-DD HH:mm"
									       data-viewformat="MMM D, YYYY, HH:mm" data-pk="1"
									       data-title="Setup event date and time"></a></td>
								</tr>
								<tr>
									<td>Textarea, buttons below. Submit by <i>ctrl+enter</i></td>
									<td><a href="#" id="inline-comments" data-type="textarea" data-pk="1"
									       data-placeholder="Your comments here..." data-title="Enter comments">awesome
										user!</a></td>
								</tr>
								<tr>
									<td>Checklist</td>
									<td><a href="#" id="inline-fruits" data-type="checklist" data-value="2,3"
									       data-title="Select fruits"></a></td>
								</tr>
								</tbody>
							</table>
						</div>
						<!-- Personal-Information -->

					</div>

					<!-- end col -->
				</div>
				<!-- end row -->
				<!-- end row -->
			</div>
			<!-- container -->
		</div>

		<!-- Signup modal content -->
		<div class="container" id="crop-avatar">

			<!-- Current avatar -->
			<div class="avatar-view" title="Change the avatar">
				<img src="${ctx}/admin/images/picture.jpg" alt="Avatar">
			</div>

			<!-- Cropping modal -->
			<div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
				<div class="modal-dialog modal-lg">
					<div class="modal-content">
						<form class="avatar-form" action="${ctx}/admin/user/upload_avatar" enctype="multipart/form-data" method="post">
							<div class="modal-header">
								<button class="close" data-dismiss="modal" type="button">&times;</button>
								<h4 class="modal-title" id="avatar-modal-label">Change Avatar</h4>
							</div>
							<div class="modal-body">
								<div class="avatar-body">

									<!-- Upload image and data -->
									<div class="avatar-upload">
										<input class="avatar-src" name="avatar_src" type="hidden">
										<input class="avatar-data" name="avatar_data" type="hidden">
										<label for="avatarInput">Local upload</label>
										<input class="avatar-input" id="avatarInput" name="avatar_file" type="file">

									</div>

									<!-- Crop and preview -->
									<div class="row">
										<div class="col-md-9">
											<div class="avatar-wrapper"></div>
										</div>
										<div class="col-md-3">
											<div class="avatar-preview preview-lg"></div>
											<div class="avatar-preview preview-md"></div>
											<div class="avatar-preview preview-sm"></div>
										</div>
									</div>

									<div class="row avatar-btns">
										<div class="col-md-9">
											<div class="btn-group">
												<button class="btn btn-primary" data-method="rotate" data-option="-90" type="button" title="Rotate -90 degrees">向左旋转</button>
												<button class="btn btn-primary" data-method="rotate" data-option="90" type="button" title="Rotate 90 degrees">向右旋转</button>
											</div>
											<div class="btn-group">
												<button class="btn btn-primary" data-method="rotate" data-option="-30" type="button">-30deg</button>
												<button class="btn btn-primary" data-method="rotate" data-option="-45" type="button">-45deg</button>
												<button class="btn btn-primary" data-method="rotate" data-option="30" type="button">30deg</button>
												<button class="btn btn-primary" data-method="rotate" data-option="45" type="button">45deg</button>
											</div>
										</div>
										<div class="col-md-3">
											<button class="btn btn-primary btn-block avatar-save" type="submit">Done</button>
										</div>
									</div>
								</div>
							</div>
							<!-- <div class="modal-footer">
                              <button class="btn btn-default" data-dismiss="modal" type="button">Close</button>
                            </div> -->
						</form>
					</div>
				</div>
			</div><!-- /.modal -->

			<!-- Loading state -->
			<div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>
		</div>
		<!-- /.modal-dialog -->
	</div>

	<!-- content -->
    <#include "common/footer.ftl">
</div>
<!-- ============================================================== -->
<!-- End Right content here -->
<!-- ============================================================== -->
</div>
<!-- END wrapper -->
<!-- jQuery  -->
<script src="${ctx}/admin/js/jquery.min.js"></script>
<script src="${ctx}/admin/js/tether.min.js"></script>
<!-- Tether for Bootstrap -->
<script src="${ctx}/admin/js/bootstrap.min.js"></script>
<script src="${ctx}/admin/js/metisMenu.min.js"></script>
<script src="${ctx}/admin/js/waves.js"></script>
<script src="${ctx}/admin/js/jquery.slimscroll.js"></script>
<!-- Counter js  -->
<script src="${ctx}/admin/plugins/waypoints/jquery.waypoints.min.js"></script>
<script src="${ctx}/admin/plugins/counterup/jquery.counterup.min.js"></script>
<!-- Sparkline charts -->
<script src="${ctx}/admin/plugins/jquery-sparkline/jquery.sparkline.min.js"></script>
<script src="${ctx}/admin/plugins/moment/moment.js"></script>
<script src="${ctx}/admin/plugins/bootstrap-editable/bootstrap-editable.min.js"></script>
<script src="${ctx}/admin/plugins/cropper/main.js?v=1.0"></script>
<script src="${ctx}/admin/pages/jquery.profile.js"></script>
<script src="${ctx}/admin/pages/jquery.xeditable.init.js"></script>
<script src="https://cdn.bootcss.com/cropper/4.0.0/cropper.js"></script>
<!-- App js -->
<script src="${ctx}/admin/js/jquery.core.js"></script>
<script src="${ctx}/admin/js/jquery.app.js"></script>
<script>
	/*$(function () {
		$('#avatarInput').on('change', function (e) {
			var filemaxsize = 1024 * 5;//5M
			var target = $(e.target);
			var Size = target[0].files[0].size / 1024;
			if (Size > filemaxsize) {
				alert('图片过大，请重新选择!');
				$(".avatar-wrapper").childre().remove;
				return false;
			}
			if (!this.files[0].type.match(/image.*!/)) {
				alert('请选择正确的图片!')
			} else {
				var filename = document.querySelector("#avatar-name");
				var texts = document.querySelector("#avatarInput").value;
				var teststr = texts; //你这里的路径写错了
				testend = teststr.match(/[^\\]+\.[^\(]+/i); //直接完整文件名的
				filename.innerHTML = testend;
			}

		});

		$(".avatar-save").on("click", function () {
			var img_lg = document.getElementById('imageHead');
			// 截图小的显示框内的内容
			html2canvas(img_lg, {
				allowTaint: true,
				taintTest: false,
				onrendered: function (canvas) {
					canvas.id = "mycanvas";
					//生成base64图片数据
					var dataUrl = canvas.toDataURL("image/jpeg");
					var newImg = document.createElement("img");
					newImg.src = dataUrl;
					imagesAjax(dataUrl)
				}
			});
		})

		function imagesAjax(src) {
			var data = {};
			data.img = src;
			data.jid = $('#jid').val();
			console.log(data)
			$.ajax({
				url: "upload-logo.php",
				data: data,
				type: "POST",
				dataType: 'json',
				success: function (re) {
					if (re.status == '1') {
						$('.user_pic img').attr('src', src);
					}
				}
			});
		}
	})*/
</script>
</body>
</html>